<template>
  <LoadPage :show="showPage"/>
  <view class="main">
    <view class="item " v-for="(item, index) in dataList" :key="index"
          @click.stop="$goUrl(`/subPackage/mine/noticeDetail?id=${item.noticeId}`)">
      <view class="dispaly-just-between">
        <view class="item-left">
          <view class="title">{{item.noticeTitle}}</view>
          <view class="con over-1">{{item.title}}</view>
        </view>
        <view class="time">{{item.createTime}}</view>
      </view>
      <view style="display: flex;justify-content: flex-end">
        <view class="detail" v-if="item.noticeTitle == '议价通知'" @click.stop="skipDetail(item)">前往详情</view>
      </view>
    </view>
    <LoadMore :status="status"/>
  </view>
</template>

<script setup>
import {ref, reactive} from 'vue';
import {msgList} from '@/api/apiList';
import {deleteObjectEmptyKey} from '@/utils/util'
import {onReachBottom, onPullDownRefresh, onLoad, onShow} from "@dcloudio/uni-app";

const dataList = ref([])
const queryData = reactive({
  pageSize: 15,
  pageNum: 1,
})
const status = ref('loadmore')
const showPage = ref(true)
const getListData = async () => {
  return new Promise(async (resolve, reject) => {
    status.value = 'loading'
    const newQuery = deleteObjectEmptyKey(queryData)
    const res = await msgList(newQuery)
    if (res.code == 200) {
      if (res.rows.length) {
        dataList.value = [...dataList.value, ...res.rows]
        dataList.value.forEach(item => {
          item.title = JSON.parse(item.noticeContent).message
          console.log(item)
        })

        status.value = 'loadmore'
        resolve('ok')
      } else {
        status.value = 'nomore'
        resolve('ok')
      }
      showPage.value = false

    }
  })
}

const skipDetail = (item) => {
  const data = JSON.parse(item.noticeContent)
  if(item.noticeTitle == "议价通知") {
    if(data.type == 0) {
      uni.navigateTo({
        url: `/subPackage/index/bookDetail?id=${data.id}`
      })
    }else {
      uni.navigateTo({
        url: `/subPackage/index/bookDetail?id=${data.id}`
      })
    }
  }else {

  }
}

onReachBottom(() => {
  queryData.pageNum++
  getListData()
})

onPullDownRefresh(() => {
  uni.showLoading({
    title: '加载中'
  })
  queryData.pageNum = 1
  dataList.value = []
  getListData()
  uni.hideLoading()
  uni.stopPullDownRefresh()
})

onShow(() => {
  queryData.pageNum = 1
  dataList.value = []
  getListData()
})
</script>

<style lang="scss" scoped>
.detail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160rpx;
  height: 50rpx;
  background-color: #ffbf0f;
  margin-top: 10rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
.main {
  padding: 32rpx;

  .item:last-child {
    margin-bottom: 0;
  }

  .item {
    padding: 24rpx;
    background-color: #ffd257;
    border: 3rpx solid #4e3b0c;
    margin-bottom: 20rpx;

    .item-left {
      flex: 3;
      .title {
        font-weight: 900;
        font-size: 30rpx;
        margin-bottom: 10rpx;
      }

      .con {
        font-weight: 700;
        font-size: 26rpx;
        margin-top: 10rpx;
      }

    }

    .time {
      flex: 2;
      font-size: 23rpx;
    }
  }
}
</style>